<template>
  <div class="app-container">
    <!-- 操作 -->
    <el-row style="margin-bottom: 10px;">
      <!-- 搜索 -->
      <div v-if="showSearch" class="filter-container" style="display: inline-block">
        <el-form :inline="true" :model="listQuery" class="form-inline">
          <el-form-item label="标题">
            <el-input v-model="listQuery.title" placeholder="标题" clearable size="small"/>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="listQuery.type" placeholder="类型" default-first-option size="small">
              <el-option label="全部" value="-1"/>
              <el-option label="系统消息" value="1"/>
              <el-option label="用户消息" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-waves type="primary" icon="el-icon-search" size="small" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-waves type="warning" icon="el-icon-refresh" size="small" @click="handleFilterClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-col :xs="24" :sm="24" :lg="24">
        <el-tooltip content="刷新" placement="top">
          <el-button v-waves type="warning" icon="el-icon-refresh" circle @click="handleFilterClear"/>
        </el-tooltip>
        <el-tooltip content="增加" placement="top">
          <el-button v-waves type="success" icon="el-icon-plus" circle @click="handleAdd"/>
        </el-tooltip>
        <el-tooltip content="搜索" placement="top">
          <el-button v-waves type="primary" icon="el-icon-search" circle @click="showSearch = !showSearch"/>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button v-waves :loading="deleting" :disabled="buttonDisabled" type="danger" icon="el-icon-delete" circle @click="handleDeleteAll"/>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      :fit="true"
      border
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="ID" align="center" width="60" prop="id" sortable="custom" fixed>
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" min-width="100px" prop="title" fixed>
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="250px" prop="content">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100px" sortable="custom" prop="type">
        <template slot-scope="scope">
          <span>{{ scope.row.type | typeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160px" prop="addTime">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button v-waves type="primary" icon="el-icon-edit-outline" circle @click="handleUpdate(scope.row.id,scope.$index)"/>
          </el-tooltip>
          <el-tooltip v-if="!scope.row.isDel" content="删除" placement="top">
            <el-button v-waves :loading="scope.row.delete" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row.id,scope.$index)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination v-show="total>0" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.psize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <el-dialog :title="formTitle" :visible.sync="infoFormVisible">
      <el-form label-position="right" label-width="100px" >
        <el-form-item label="消息标题" prop="orderNo">
          <el-input v-model="temp.title" placeholder="消息标题"/>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input
            :autosize="{ minRows: 3, maxRows: 6}"
            v-model="temp.content"
            type="textarea"
            placeholder="请输入消息内容"/>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-radio-group v-model="temp.type">
            <el-radio :label="1">系统消息</el-radio>
            <el-radio :label="2">用户消息</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="infoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMessageInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getInfo, saveInfo, del, delAll } from '@/api/message'
import waves from '@/directive/waves'
import { getArrByKey } from '@/utils'

export default {
  name: 'Message',
  components: { },
  directives: {
    waves
  },
  filters: {
    typeFilter(type) {
      const typeMap = {
        1: '系统消息',
        2: '用户消息'
      }
      return typeMap[type]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      selectedRows: null,
      listLoading: true,
      deleting: false,
      showSearch: false,
      buttonDisabled: true,
      formTitle: '增加',
      listQuery: {
        page: 1,
        psize: 10,
        sort: 'id desc',
        title: '',
        type: '-1'
      },
      currentId: 0,
      currentIndex: -1,
      infoFormVisible: false,
      temp: {
        id: 0,
        type: 1,
        title: '',
        content: ''
      }
    }
  },
  watch: {
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchList()
    },
    handleFilterClear() {
      this.listQuery = {
        page: 1,
        psize: 10,
        sort: 'id desc',
        title: '',
        type: '-1'
      }
      this.fetchList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop !== null) {
        this.listQuery.sort = prop + ' ' + (order === 'ascending' ? 'asc' : 'desc')
        this.fetchList()
      }
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.buttonDisabled = false
      } else {
        this.buttonDisabled = true
      }
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.listQuery.psize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchList()
    },
    handleAdd() {
      this.formTitle = '增加'
      this.currentId = 0
      this.currentIndex = -1
      this.temp = {
        id: 0,
        type: 1,
        title: '',
        content: ''
      }
      this.infoFormVisible = true
    },
    handleDelete(id, index) {
      const _this = this
      this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$set(_this.list[index], 'delete', true)
        del(id).then(response => {
          if (response.status === 1) {
            _this.list.splice(index, 1)
            _this.total = _this.total - 1
            _this.$message.success(response.msg)
          } else {
            _this.$message.error(response.msg)
          }
          _this.$set(_this.list[index], 'delete', false)
        }).catch((error) => {
          _this.$set(_this.list[index], 'delete', false)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteAll() {
      const _this = this
      if (this.selectedRows.length > 0) {
        this.$confirm('此操作将永久删除这些消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deleting = true
          const ids = getArrByKey(_this.selectedRows, 'id')
          const idstr = ids.join(',')
          delAll({ ids: idstr }).then(response => {
            if (response.status === 1) {
              const delindex = []
              _this.list.forEach(function(item, index, input) {
                if (ids.indexOf(item.id) > -1 && item.id !== 1) {
                  delindex.push(index)
                }
              })
              for (let i = delindex.length - 1; i >= 0; i--) {
                _this.list.splice(delindex[i], 1)
              }
              _this.total = _this.total - delindex.length
              _this.$message.success(response.msg)
            } else {
              _this.$message.error(response.msg)
            }
            _this.deleting = false
          }).catch((error) => {
            _this.deleting = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        _this.$message.error('请选择要删除的数据')
      }
    },
    handleUpdate(id, index) {
      getInfo(id).then(response => {
        if (response.status === 1) {
          this.currentId = id
          this.currentIndex = index
          this.formTitle = '编辑'
          this.temp.id = response.data.id
          this.temp.title = response.data.title
          this.temp.content = response.data.content
          this.temp.type = response.data.type
          this.infoFormVisible = true
        }
      })
    },
    saveMessageInfo() {
      this.listLoading = true
      const data = {
        id: this.temp.id,
        title: this.temp.title,
        content: this.temp.content,
        type: this.temp.type
      }
      saveInfo(data).then(response => {
        if (response.status === 1) {
          const temp = response.data
          if (this.currentIndex >= 0) {
            this.list.splice(this.currentIndex, 1, temp)
          } else {
            if (this.list.length >= 10) {
              this.list.pop()
            }
            this.list.unshift(temp)
            this.total = this.total + 1
          }
          this.currentIndex = -1
          this.currentId = 0
          this.infoFormVisible = false
          this.$message.success(response.msg)
        } else {
          this.$message.error(response.msg)
        }
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
